<template>
  <van-slider class="leading-4 mr-2" bar-height="4" :active-color="store.theme.HoverBgColor" :inactive-color="store.theme.bgColor"
              :max="progressBarMax" v-model="playProgressBar" @change="onChange" @drag-start="dragStart">
    <template #button>
      <div class="w-2 h-2 bg-white rounded-full shadow-md"></div>
    </template>
  </van-slider>
</template>

<script setup>
import {useStore} from "@/store/index";

const store = useStore()
// 接收的样式
defineProps({
  progressBarMax: Number,
  playProgressBar: Number
})

const $emit = defineEmits(['onChange', 'dragStart'])

const onChange = (value) => {
  $emit('onChange', value)
}

const dragStart = () => {
  $emit('dragStart')
}
</script>

<style scoped>

</style>
